<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "RoseChart",
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    name: {
      type: String,
      default: 'roseChart'
    },
    chartsData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      option: {},
      myChart: null,
    };
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        this.myChart = echarts.init(this.$refs.chartRef);
        this.option.series[0].name = this.name;
        this.option.series[0].data = this.chartsData;
        this.myChart.setOption(this.option);
        this.myChart.resize();
      });
    },
    updateChart() {
      if (this.myChart) {
        this.option.series[0].data = this.chartsData;
        this.myChart.setOption(this.option);
      }
    },
    onResize() {
      if (this.myChart) {
        this.myChart.resize(); // 监听窗口大小变化，重新设置图表大小
      }
    }
  },
  created() {
    this.option = {

      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: false,
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Area Mode',
          type: 'pie',
          radius: [10, 70],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },
          data: []
        }
      ]
    }
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.onResize); // 监听窗口大小变化
    console.log('this.chartsData', this.chartsData);
  },
  watch: {
    chartsData: {
      handler(newVal) {
        this.updateChart();
      },
      deep: true
    }
  }
};
</script>
